<template>
  <div class="card_album">
    <van-popup v-model:show="visible" round class="" @close="close">
      <div v-if="state.info" class="card_album_box flex flex-items-center">
        <div class="cards">
          <div v-for="card in state.info" :key="card.id" class="card">
            <img class="card_img" :src="cardBaseUrl + card.pic" alt="">
            <div class="card_title">
              <img src="https://jwc-static.jdwxk.com/imgs/map/card_title_bg.png" alt="">
              <span>{{ card.name }}</span>
            </div>
          </div>
        </div>
        <div class="title">
          <img src="https://jwc-static.jdwxk.com/imgs/map/cards_head_icon.png" alt="">
        </div>
        <div class="close flex flex-justify-center flex-items-center" @click="close">
          <img src="https://jwc-static.jdwxk.com/imgs/map/close.png" alt="">
        </div>
        <div class="tip">
          AR扫码标志性物品会有惊喜哦～
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { defineExpose } from 'vue'
import { getAllCards } from '@/api/activities'

import { useUserStoreWidthOut } from '@/store/modules/user'

const cardBaseUrl = ref(import.meta.env.VITE_GLOB_IMG_URL)

const userStore = useUserStoreWidthOut()
const userInfo = computed(() => userStore.getUserInfo)

const visible = ref(false)
const state = reactive({
  info: null,
})
async function open() {
  const res = await getAllCards({
    phone: userInfo.value.phone,
    size: 100,
  })
  if (res.code === 200) {
    state.info = res.data.records
    visible.value = true
  }
}
function close() {
  state.info = null
  visible.value = false
}
defineExpose({ open })
</script>

<style lang="scss" scoped>
.card_album {
  color: #333333;

  .van-overlay {
    width: 100vh;
    height: 100vw;
    left: 0;
  }

  .van-popup {
    max-width: none;
    height: calc(60vw + 60px);
    background-color: transparent !important;
    overflow: visible;
  }

  .box {
    border-bottom: 27px solid white;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    transform: rotate(180deg);
    width: 52px;
    margin-top: -1px;
    margin-left: calc(25vh - 26px);
  }

  .card_album_box {
    box-sizing: border-box;
    width: 547px;
    height: 274px;
    position: relative;
    background: url('https://jwc-static.jdwxk.com/imgs/map/cards_bg.png');
    background-size: contain;
    background-repeat: no-repeat;

    .title {
      position: absolute;
      top: -6px;
      left: 7.5px;

      img {
        width: 140px;
        height: 30px;
      }
    }

    .close {
      position: absolute;
      right: 0;
      top: 0;
      width: 48px;
      height: 38px;

      img {
        width: 18px;
        height: 18px;
      }
    }

    .tip {
      transform: translateX(-50%);
      position: absolute;
      left: 50%;
      bottom: 13px;
    }

    .cards {
      width: 497px;
      height: 196px;
      overflow-y: scroll;
      margin: -11px auto 0 auto;
      display: flex;
      flex-wrap: wrap;
      column-gap: 11.5px;
      row-gap: 15px;
      align-items: center;
      padding: 15px 0;

      .card {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        width: 90px;
      }

      .card_img {
        border-radius: 6px;
        border: 2.5px solid #d1af7d;
        width: 90px;
        height: 67.5px;
      }

      .card_title {
        margin: -10px auto 0 auto;
        position: relative;

        img {
          width: 76.5px;
          height: 19px;
        }

        span {
          position: absolute;
          left: 50%;
          top: 0;
          width: 100%;
          text-align: center;
          color: white;
          transform: translateX(-50%);
          line-height: 20px;
          font-size: 10px !important;
        }
      }
    }
  }
}
</style>
